<template>
  <div>
    <div class="view-login view-regist">
      <div class="logo-box">
        <el-image :src="require('../../../static/logo/logo_blue.png')"
                  style="display: block;width: 136px;height: 34px;">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
      <div class="login-content">
        <div class="left">
          <img src="../../../static/register/bg.png" alt="背景图">
        </div>
        <div class="right">
          <div class="right-content">
            <div class="title">
              <span>注册账号</span>
            </div>
            <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="0"
                     style="background-color: #fff">
              <el-form-item prop="mobile">
                <el-input v-model="registerForm.mobile" placeholder="请输入邮箱/手机号/账号" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="registerForm.password" autocomplete="off"
                          placeholder="请输入密码" show-password></el-input>
              </el-form-item>
              <el-form-item prop="checkPass">
                <el-input type="password" v-model="registerForm.checkPass" autocomplete="off"
                          placeholder="请再次输入密码确认" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <p style="font-weight: 700;font-size: 16px;text-align: left">选择身份</p>
                <div class="role-box">
                  <div class="item flex-align" :class="{active: registerForm.usertype === 0}"
                       @click="registerForm.usertype = 0">
                    <img src="../../../static/register/teacher.svg" alt="teacher" class="icon">
                    <span class="name">老师/助教</span>
                  </div>
                  <div class="item flex-align" :class="{active: registerForm.usertype === 1}"
                       @click="registerForm.usertype = 1">
                    <img src="../../../static/register/student.svg" alt="student" class="icon">
                    <span class="name">学生</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <el-input v-model="registerForm.name" placeholder="请输入姓名" clearable></el-input>
              </el-form-item>
              <el-form-item prop="school">
                <!--            <el-select-->
                <!--              v-model="value"-->
                <!--              filterable-->
                <!--              remote-->
                <!--              reserve-keyword-->
                <!--              placeholder="请选择学校"-->
                <!--              :remote-method="remoteMethod"-->
                <!--              :loading="loading">-->
                <!--              <el-option-->
                <!--                v-for="item in options"-->
                <!--                :key="item.value"-->
                <!--                :label="item.label"-->
                <!--                :value="item.value">-->
                <!--              </el-option>-->
                <!--            </el-select>-->
                <el-input v-model="registerForm.school" placeholder="请输入学校" clearable></el-input>
              </el-form-item>
              <el-form-item prop="jobNumber" v-if="registerForm.usertype === 1">
                <el-input v-model="registerForm.jobNumber" placeholder="请输入学号" clearable></el-input>
              </el-form-item>

              <!--              <el-form-item>-->
              <!--                <el-button type="primary" @click="onSubmit">立即创建</el-button>-->
              <!--                <el-button>取消</el-button>-->
              <!--              </el-form-item>-->
            </el-form>
            <div class="bottom-box">
              <div style="margin-top: 12px">
                <el-button type="primary" style="width: 100%" @click="submitRegister('registerForm')">注册</el-button>
              </div>
              <div style="margin-top: 12px; text-align: right;font-size: 14px">
                已有账号？
                <span style="cursor:pointer;color: #4285f4;" @click="goLogin('registerForm')">去登录</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crypto from "crypto";
import {postRequest} from "../../tools/api";
import {mymessage} from "../../tools/mymessage";

export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registerForm.checkPass !== '') {
          this.$refs.registerForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        name: '',
        password: '',
        checkPass: '',
        school: '',
        clazz: '',
        usertype: 0,
        mobile: '',
        jobNumber: '',
      },
      rules: {
        mobile: [
          {required: true, message: '请输入邮箱/手机号/账号', trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        school: [
          {required: true, message: '请输入学校', trigger: 'blur'}
        ],
        jobNumber: [
          {required: true, message: '请输入学号', trigger: 'blur'}
        ],
      }
      /*options: [],
      value: [],
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]*/
    }
  },
  mounted() {
    /*this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });*/
  },
  methods: {
    /*remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }*/

    submitRegister(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // md5 加密
          let md5 = crypto.createHash("md5");
          md5.update(this.registerForm.password);
          let password = md5.digest('hex');
          this.registerForm.password = password;

          postRequest('user/register', this.registerForm).then(resp => {
            if (resp.code === 200) {
              mymessage.success('注册成功');
              this.resetForm(form)
              this.$router.push('/login')
            } else {
              mymessage.warning('该账号已被注册,请重新输入');
            }
          })
        } else {
          return false;
        }
      });
    },
    goLogin(form) {
      this.$router.push("/login");
      this.resetForm(form)
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    }
  }
}
</script>

<style scoped>
.view-login {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.view-login .el-button, .view-login .el-input__inner {
  height: 48px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.view-regist {
  display: flex;
  flex-direction: column;
  background-size: 100%;
  background-repeat: no-repeat;
  /*padding-top: 20px;*/
}

.view-login .logo-box {
  position: absolute;
  top: 48px;
  left: 62px;
  cursor: pointer;
}

.view-regist .login-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-login .login-content {
  display: flex;
  justify-content: space-between;
}

.view-login .login-content .left {
  margin-right: -100px;
}

.view-login .login-content .left img {
  display: block;
  height: 538px;
}

.view-regist .login-content .right {
  margin: 12px 0;
}

.view-regist .login-content .right .right-content {
  width: 431px;
  padding: 0 35px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 61px 0 rgb(85 108 144 / 7%);
}

.view-regist .login-content .right .title {
  position: relative;
  padding: 18px 0;
  text-align: center;
}

.view-regist .login-content .right .title span {
  font-size: 22px;
  font-weight: 700;
}

.view-regist .login-content .right .bottom-box {
  padding-bottom: 12px;
  margin-top: 35px;
}

.view-login .role-box {
  display: flex;
  justify-content: space-between;
}

.view-login .role-box .item {
  width: 172px;
  padding: 8px 16px;
  border: 1px solid #fff;
}

.flex-align {
  display: flex;
  align-items: center;
}

.view-login .role-box .item .icon {
  margin-right: 9px;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.view-login .role-box .item .name {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  text-align: center;
  color: #3c4043;
  line-height: 24px;
  letter-spacing: 1px;
}

.view-login .role-box .active {
  border: 1px solid #4285f4;
}
</style>
